<template>
    <div >
        <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
            :action="upload.url" :disabled="upload.isUploading"
            :on-progress="handleFileUploadProgress"
            :on-success="handleFileSuccess"
            :auto-upload="false" drag
            >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
                将文件拖到此处，或
                <em>点击上传</em>
            </div>
            <div class="el-upload__tip" slot="tip" v-if="!isTemplate">
                <el-link type="info" style="font-size:12px;color: #1890ff;" @click="importTemplate">下载模板</el-link>
            </div>
            <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
        </el-upload>
        <div style="text-align: right;padding-top: 15px;">
            <el-button type="primary" @click="submitFileForm">确 定</el-button>
            <el-button @click="cancelDialog">取 消</el-button>
        </div>
    </div>
</template>

<script>
import {getToken} from "@/utils/auth";
export default {
    props: {
        modaltitle: {
            type: String,
            default: '下载模板'
        },
        uploadUrl: {
            type: String,
            required: true
        },
        // 不传值，默认false
        isTemplate: Boolean
    },
    data() {
        return {
            upload: {
                // 是否禁用上传
                isUploading: false,
                // 设置上传的请求头部
                headers: {
                    "token":getToken(),
                    Authorization: process.env.VUE_APP_AUTHORIZATION,
                    "X-Access-Token": process.env.VUE_APP_ACCESSTOKEN
                },
                // 上传的地址
                url: process.env.VUE_APP_EXAM_API + this.uploadUrl
            },
        }
    },
    watch: {

    },
    methods: {
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
            if (response.retCode === '200') {
                this.$alert(response.responseBody, "导入结果", {dangerouslyUseHTMLString: true});
                this.submitBtnSuccess();
            } else {
                this.$alert(response.errorDesc, "导入结果", {dangerouslyUseHTMLString: true});
            }
        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit();
        },
        // 文件上传成功刷新数据
        submitBtnSuccess() {
            this.$emit('submitBtnSuccess')
        },
        // 取消按钮
        cancelDialog() {
            this.$emit('cancelDialog')
        },
        // 下载本地文件
        importTemplate() {
            this.$emit('importTemplate', excelTemplateUrl => {
                this.download(excelTemplateUrl);
            });
        }
    }
}
</script>
